<template>
  <div class="layout page-control">
    <Row>
      <Col span="24"><Button type="primary" icon="md-add" @click="onEdit('')">{{$t('page.app.limits.add')}}</Button></Col>
    </Row>
    <Divider />
    <Table :columns="columns" :data="limits.list" border :loading="limits.loading">
      <template slot-scope="{ row, index }" slot="status">
        <StatusBadge :content="$t(row.lblStatus[1])" :badge="row.lblStatus[0]" :status="row.lblStatus[2]" @onChanged="onStatusChanged(row)"></StatusBadge>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" @click="onEdit(row)">{{$t('button.edit')}}</Button>
      </template>
    </Table>
    <AppLimit ref="applimit" @onRefresh="loadLimits"></AppLimit>
  </div>
</template>
<script>
  import StatusBadge from '@/components/statusbadge'
  import AppLimit from './comp/applimit'
  export default {
    components: { StatusBadge, AppLimit },
    data() {
      return {
        columns: [
          { title: '', slot: 'status', width: 50, align: 'center' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.limits.tb.address')) }, key: 'path' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.limits.tb.befored')) }, key: 'befored', width: 100 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.limits.tb.validTime')) }, key: 'validTime', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.limits.tb.control')) }, key: 'control', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.limits.tb.hystrix')) }, key: 'hystrix' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.limits.tb.handle')) }, key: 'handle' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.limits.tb.whites')) }, key: 'whites', ellipsis: true, tooltip: true, tooltipTheme: 'light' },
          { title: '', slot: 'action', width: 150, align: 'center' }
        ],
        limits: {
          loading: true,
          list: []
        },
      }
    },
    computed: {
      lang() {
        return {
          beforedFeign: this.$t('page.app.limits.tb.beforedFeign'),
          beforedController: this.$t('page.app.limits.tb.beforedController'),
          validnow: this.$t('page.app.limits.tb.validTimeNow'),
          validforever: this.$t('page.app.limits.tb.validTimeForever'),
          controlQps: this.$t('page.app.limits.tb.controlQps'),
          controlWarmup: this.$t('page.app.limits.tb.controlWarmup'),
          hystrixAuto: this.$t('page.app.limits.tb.hystrixAuto'),
          hystrixPeriod: this.$t('page.app.limits.tb.hystrixPeriod'),
          hystrixError: this.$t('page.app.limits.tb.hystrixError'),
          hystrixRecover: this.$t('page.app.limits.tb.hystrixRecover'),
          handleFastfail: this.$t('page.app.limits.tb.handleFastfail'),
          handleTimeout: this.$t('page.app.limits.tb.handleTimeout'),
          whites: this.$t('page.app.limits.tb.whites'),
          whitesGroup: this.$t('page.app.limits.tb.whitesGroup'),
          whitesService: this.$t('page.app.limits.tb.whitesService'),
        }
      }
    },
    created() {
      this.loadLimits()
    },
    methods: {
      loadLimits() {
        this.limits.loading = true
        this.$md.dispatch('app_limits').then(data => {
          if (data.retCode === 1) {
            let limits = data.data || []
            let limit
            for (let i in limits) {
              limit = limits[i]
              // 状态
              limit.lblStatus = this.$util.nodeStatus(limit.status)
              // 控制位置
              limit.befored = limit.before ? this.lang.beforedFeign : this.lang.beforedController
              // 有效期
              if (!limit.startTime && !limit.endTime) {
                limit.validTime = this.lang.validforever
              } else {
                limit.validTime = (limit.startTime || this.lang.validnow) + ' ~ ' + (limit.endTime || this.lang.validforever)
              }
              // 控制参数
              limit.control = this.lang.controlQps + ':' + limit.qps + ', ' + this.lang.controlWarmup + ':' + limit.warmup
              // 控制条件
              if (limit.auto) {
                limit.hystrix = this.lang.hystrixAuto
              } else {
                limit.hystrix = limit.period + this.lang.hystrixPeriod + this.lang.hystrixError + limit.errors + ', ' + this.lang.hystrixRecover + ':' + limit.recover
              }
              // 控制结果
              if (limit.fastfail) {
                limit.handle = this.lang.handleFastfail
              } else {
                limit.handle = this.lang.handleTimeout + ':' + limit.timeout
              }
              // 白名单
              let whites = []
              if (limit.whiteGroupList.length > 0) whites.push(this.lang.whitesGroup + ':' + limit.whiteGroupList.join(';'))
              if (limit.whiteServiceList.length > 0) whites.push(this.lang.whitesService + ':' + limit.whiteServiceList.join(';'))
              limit.whites = whites.join(', ')
            }
            this.limits.list = limits
          }
          this.limits.loading = false
        })
      },
      onEdit(limit) {
        this.$refs.applimit.show(limit || {})
      },
      onStatusChanged(limit) {
        limit.status = limit.status === 'ON' ? 'OFF' : 'ON'
        this.$md.dispatch('app_limit_status', {
          data: limit
        }).then(data => {
          if (data.retCode === 1) {
            this.$Message.success(this.$t('submitok'))
            this.loadLimits()
          }
        })

      }
    }
  }
</script>
